<template>
    <div class="pop-searchup">
        <div class="search-box">
            <el-form :model="objtypeform">
                <el-form-item>
                    <el-select
                        v-model="objtypeform.objtype"
                        class="sele-w"
                        @change="changeobjFun"
                    >
                        <el-option
                            v-for="item in search_type_data"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="input-w">
                    <el-input
                        v-model="objtypeform.kw"
                        :placeholder="`请输入${obj_name}`"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="searchFun" type="primary"
                        >搜索</el-button
                    >
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetList">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";

export default {
    name: "popSearchup",
    data() {
        return {
            objtypeform: {
                objtype: "",
                kw: "",
            },
            search_type_data: [],
            obj_name: "",
            searchData: [],
            is_soll: false,
            pfrom: 0,
        };
    },
    methods: {
        searchFun() {
            this.emptyData();
            this.searchList();
        },
        loadFun(pfrom) {
            this.pfrom = pfrom;
            this.searchList();
        },
        // 搜索的客户列表
        async searchList() {
            if (!this.objtypeform.kw) return;
            let url = config.SEARCH_S_CUSTOMER;
            let param = {
                exact: "2",
                grade: 0,
                kw: this.objtypeform.kw,
                objtype: this.objtypeform.objtype,
                pfrom: this.pfrom,
                pnum: "20",
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.custom_ls) {
                this.searchData = this.searchData.concat(res.data.custom_ls);
            } else {
                this.is_soll = true;
            }
            const data = {
                list: this.searchData,
                is_soll: this.is_soll,
                pfrom: this.pfrom,
            };

            this.$emit("searchList", data);
        },
        // 获取搜索关键词类型
        async getObjtypels() {
            let url = config.SEARCH_S_OBJTYPE_LS;
            let param = {
                ch: "custom",
                grade: "0",
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.es_ls) {
                this.search_type_data = res.data.es_ls;
                if (res.data.es_ls) {
                    this.objtypeform.objtype = res.data.es_ls[0].code;
                    this.obj_name = res.data.es_ls[0].name;
                }
            }
        },
        // 搜索关键词类型
        changeobjFun(val) {
            this.search_type_data.map((v) => {
                if (v.code == val) {
                    this.obj_name = v.name;
                }
            });
        },
        // 重置
        resetList() {
            this.obj_name = this.search_type_data[0].name;
            this.objtypeform = {
                objtype: "",
                kw: "",
            };
            this.$emit("resetList");
        },
        emptyData() {
            this.pfrom = 0;
            this.searchData = [];
            this.is_soll = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.pop-searchup {
    ::v-deep.search-box {
        .el-form-item {
            margin-right: 10px;
            &:last-child {
                margin: 0;
            }
        }
        .el-form {
            display: flex;
        }
        .sele-w {
            width: 120px;
        }
        .input-w {
            max-width: 350px;
            width: 100%;
        }
    }
}
</style>